.container{
    width: 1200px;
    margin:auto;
}
nav{
    height: 50px;
    background-color: skyblue;
    .container{
        width: 1200px ;
        margin: 0 auto;
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 50px;
            li{
                cursor: pointer;
                width: 271px;
                height: 100%;
                text-align: center;
                &:hover{
                    background-color: pink;
                }
            }
            
        } 
   }        
} 
    main{
        @extend .container;
        display: flex;
        .aside{
            height: 468px;
            width: 271px;
           ul{
               width: 271px;
               height: 100%;
               background-color: pink;
               display: flex;
               flex-direction: column;
               justify-content: space-around;
               
           }
           li{
               padding-left: 70px;
               cursor: pointer;
               line-height: 40px;
               height: 40px;
               &:hover{
                 background-color: beige;
               }
               img{
                   vertical-align: middle;
               }
               a{
                 &:hover{
                     color: red;
                     border-bottom: 1px solid red;
                 }
               }
               
           }
        }
        .maincontent{
            display: flex;
         .leftcontent{
             
            .swiper{
                width: 600px;
                height: 290px;
                margin-left: 10px;
                background-color: blue;
            }
            .bottom{
                ul{
                    display: flex;
                    justify-content: space-evenly;
                    margin-top: 15px;
                    li{
                        img{
                            width: 280px;
                            height: 150px;
                            border-radius:30px ;
                            &:hover{
                                box-shadow: -2px 4px 5px 3px rgba(36, 35, 35,.5);
                            }
                        }
                       
                    }
                }
                
            }
        }
        .right{
             ol{
                 li{

                     margin-bottom:20px;
                     margin-left: 10px;
                     img{
                         width: 300px ;
                     }
                 }
                 :first-child{
                      img{
                          height: 290px;
                          &:hover{
                            box-shadow: -2px 4px 5px 3px rgba(36, 35, 35,.5);
                        }
                      }
                 }
                 :last-child{
                     img{
                         height: 140px;
                         &:hover{
                            box-shadow: -2px 4px 5px 3px rgba(36, 35, 35,.5);
                        }
                     }
                 }
             }
        }
         }
        }
.product{
          .productNav{
              height: 50px;
              @extend .container;
              background-color: rgba(135, 206, 235,.5);
              ul{
                
                display: flex;
                line-height: 50px;
                li{
                 margin-right: 20px;
                 cursor: pointer;
                }
                :first-child{
                    font-size: 18px;
                    
                }
              }
          }
          .productlist{
              margin-top: 20px;
            @extend .container;
            ul{
                display: flex;
                flex-wrap: wrap;
                // justify-content: space-between;
                li{
                    width: 276px;
                    height: 389px;
                    // background-color: plum;
                    // opacity: .5;
                    margin: 5px 12px;
                    &:hover{
                        box-shadow: -2px 4px 5px 3px rgba(36, 35, 35,.5);
                    }
                    img{
                        width: 100%;
                        height: 60%;
                    }
                    .cart-introduce{
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-indent: 1em;
                        text-overflow: ellipsis ;
                        margin: 15px 0;
                    }
                  .cart-source{
                      width: 100%;
                        display: flex;
                        justify-content: space-between;
                        margin: 15px 0;
                        :first-child{
                            margin-left: 1em;
                           background-color:red;
                           color: white;
                        }
                        :last-child{
                            margin-right: 1em;
                        }
                    }
                    .cart-price{
                        margin-top: 30px;
                        
                         :first-child{
                            margin-left: 10px;
                             color: red;
                         }
                         .price{
                            color: red;
                            font-size: 30px;
                         }
                         .price-decimal{
                             color: red;
                         }
                         .vol{
                             float: right;
                             margin:12px 1em;
                             border: 1px solid red;
                             color: red;
                         }
                    }
                
            }
          }
      }  
      .onTop{
           position: fixed;
           right: 100px;
           bottom: 250px;
           display: none;
           img{
               width: 60px;
               height: 60px;
           }
      }
      .addproduct{
           text-align: center;
           button{
               width: 250px;
               height: 70px;
               border-radius: 30px;
               background-color: #FEE44E;
               font-size: 20px;
               outline: none;
           }
      }
    }  
 
  